<!--  -->
<template>
  <div class="home">
    <nav-bar class="home-nav">
      <template #center>购物街</template>
    </nav-bar>

    <tab-contorl
      :titles="['流行','新款','精选']"
      v-show="isTabFixed"
      class="tabcontorl-c fixed"
      @tabClick="tabClick"
      ref="tabControl1"
    />

    <scroll
      class="homeSwiper"
      :probeType="3"
      @scroll="contentScroll"
      ref="scroll"
      :pullUpLoad="true"
      @pullingUp="loadMore"
      :data="goodsList[currentType].list"
    >
      <home-swiper :banners="banners" ref="hSwiper"></home-swiper>

      <recommen-view :recomends="recommends" />

      <liuxing-view />

      <tab-contorl
        :titles="['流行','新款','精选']"
        class="tabcontorl-c"
        @tabClick="tabClick"
        ref="tabControl2"
      />

      <goods-list :goods-list="showGoodsList" />
    </scroll>

    <back-top @backTop="backTop" v-show="showBackTop" />
  </div>
</template>

<script>
// 导入组件相关
import HomeSwiper from "./childCompt/HomeSwiper";
import RecommenView from "./childCompt/RecommenView";
import LiuxingView from "./childCompt/LiuxingView";

import NavBar from "@/components/common/navbar/NavBar";
import TabContorl from "@/components/content/tabContorl/TabContorl";
import GoodsList from "@/components/content/goods/GoodsList";
import Scroll from "@/components/content/scroll/Scroll";

// 导入请求相关
import { getHomeMultidata, getHomeData } from "@/network/home.js";

//  导入常量
import { BANNER, RECOMMEND } from "@/network/home.js";
import { NEW, POP, SELL } from "@/common/const";

import { mixinRefresh, mixinGoTop } from "@/common/utils/mixin.js"; // 导入mixin封装的方法

export default {
  mixins: [mixinRefresh, mixinGoTop],
  data() {
    return {
      banners: [],
      recommends: [],
      goodsList: {
        // 建立商品数据模型
        pop: { page: 1, list: [] },
        new: { page: 1, list: [] },
        sell: { page: 1, list: [] }
      },
      currentType: POP,
      isTabFixed: false,
      tabOffsetTop: 0,
      saveY: 0
    };
  },
  computed: {
    showGoodsList() {
      return this.goodsList[this.currentType].list;
    }
  },
  created() {
    // 调用methods中axios请求方法，拿到数据
    this.getMultiData();

    // 2.请求商品数据
    this.getHomeProducts(POP);
    this.getHomeProducts(NEW);
    this.getHomeProducts(SELL);
  },
  mounted() {
    // 事件总线，拿到并执行$bus中itemImgLoad方法（需要在main.js中vue实例全局注入$bus）拿到图片加载事件
    this.$bus.$on("itemImgLoad", () => {
      this.newRefresh();
    });
  },
  updated() {
    // 组件更新完闭钩子函数
    // 获取tabControl的offsetTop
    // this.tabOffsetTop = this.$refs.tabControl.$el.offsetTop
  },
  destroyed() {
    // 销毁钩子
    //  console.log('home is destroyed'); // 查看home有没有销毁
  },
  activated() {
    // 组件激活钩子
    this.newRefresh(); // 重新刷新，让scroll重新计算一次，避免出现无法滚动、跳到顶部问题
    this.$refs.scroll.scrollTo(0, -300, 0);
  },
  deactivated() {
    // 组件离开钩子
    this.saveY = this.$refs.scroll.getScrollY();
  },
  methods: {
    /**
     * 网络请求相关方法
     */
    // 获取banner数据
    getMultiData() {
      getHomeMultidata().then(res => {
        // 获取bnaner数据
        this.banners = res.data[BANNER].list;
        // 获取首页推荐信息数据
        this.recommends = res.data[RECOMMEND].list;
        // 下次更新DOM时,获取新的tabOffsetTop值(不保险,可以在updated钩子中获取)
        this.$nextTick(() => {
          this.tabOffsetTop = this.$refs.tabControl2.$el.offsetTop;
        });
      });
    },

    // 获取商品数据
    getHomeProducts(type) {
      getHomeData(type, this.goodsList[type].page)
        .then(res => {
          // ...res.data.list --> 逐个解析，后 push 到 this.goods[type].list中
          this.goodsList[type].list.push(...res.data.list);
          this.goodsList[type].page += 1;

          this.newRefresh(); // 是否需要每次获取上拉加载数据后，刷新一次？
          // 兼容scroll滚动计算问题
          this.$refs.scroll.finishPullUp();
        })
        .catch(err => {
          console.log(err);
        });
    },

    /**
     * 事件监听相关方法
     */
    // 接受子组件$emit传来的tabClick自定义事件，携带了index参数
    tabClick(index) {
      switch (index) {
        case 0:
          this.currentType = POP;
          break;
        case 1:
          this.currentType = NEW;
          break;
        case 2:
          this.currentType = SELL;
          break;
      }
      this.$refs.tabControl1.currIndex = index; // 让两个选项卡当前hover保持一致
      this.$refs.tabControl2.currIndex = index; // 让两个选项卡当前hover保持一致
    },
    // 自定义事件：拿到scroll传过来的position包含了x、y轴信息
    contentScroll(position) {
      // 1.决定tabFixed是否显示
      this.isTabFixed = position.y < -this.tabOffsetTop;
      // 2.决定backTop是否显示，mixin中
      this.listenShowBackTop(position);
    },
    // 加载更多。监听子组件emit过来的：加载到底部的事件
    loadMore() {
      this.getHomeProducts(this.currentType);
    }
  },
  components: {
    RecommenView,
    HomeSwiper,
    LiuxingView,

    NavBar,
    TabContorl,
    GoodsList,
    Scroll
  }
};
</script>

<style lang='scss' scoped>
.homeSwiper {
  position: fixed;
  top: 0.86rem;
  bottom: 1.1rem;
  left: 0;
  right: 0;
}

.home-nav {
  background: #ff699c;
  color: #fff;
}

.tabcontorl-c {
  background: #ffffff;
  position: sticky;
  top: 0.86rem;
  z-index: 300;
}
.fixed {
  position: fixed;
  left: 0;
  right: 0;
  top: 0.86rem;
}
</style>